<template>
	<!-- 定义一个包含血液扫码输入框的容器，宽度由 props 传入的 width 控制 -->
	<div class="mkScanInput" ref="inputRef" :style="{ 'width': width }">
		<MkScanInput ref="codeScanRef" @onEnter="handleEnter" :placeholder="placeholder" :width="scanInpWidth" />
		<div ref="popoverRef" class="mkScanInput-popover"></div>
		<el-popover placement="bottom-end" trigger="click" :width="600" :virtual-ref="popoverRef" virtual-triggering>
			<MkScanInput ref="chanPinScanRef" placeholder="扫产品码或全码" width="300px" @onEnter="handleScan" />
			<MkTable :data="list" @row-dblclick="handleSelect">
				<MkColumn prop="xianXueMa" label="献血码" />
				<MkColumn prop="chanPinId" label="产品码" />
				<MkColumn prop="mingCheng" label="血液名称" />
				<MkColumn prop="abo" label="ABO" />
				<MkColumn prop="rhD" label="RhD" />
				<MkColumn prop="rongLiang" label="容量" />
				<MkColumn prop="danWei" label="单位" />
				<MkColumn prop="kuCunZhuangTai" label="库存状态" />
				<MkColumn prop="teShuChuLi" label="特殊处理" />
				<MkColumn prop="remark" label="备注" />
			</MkTable>
		</el-popover>
	</div>
</template>

<script lang='ts' setup>
// 导入工具函数，包括日志输出和空值判断
import { clog, isNull } from '/@/utils';
// 导入库存相关的 API 和输出类型
import { InvKuCunApi, InvKuCunOutput } from '/@/api/inv/InvKuCun';
// 导入 Element Plus 的消息提示组件
import { ElMessage } from 'element-plus';
// 血液扫码框组件
// 用法: 使用时不要绑定 v-model, 仅通过 onEnter 事件获取扫码(回车)结果
// <MkXueYeScanInput placeholder="请扫描条码" @onEnter="getBarcode" />
// 定义组件名称
defineOptions({
	name: 'MkXueYeScanInput'
})

// 定义组件接收的 props
const props = defineProps({
	// 输入框的占位提示文本，默认为空字符串
	placeholder: {
		type: String,
		default: '请扫码'
	},
	// 输入框容器的宽度，默认为 '290px'
	width: {
		type: String,
		default: '290px'
	},
	// 扫码框的宽度，默认为 '290px'
	scanInpWidth: {
		type: String,
		default: '290px'
	}
})
// 定义组件触发的事件
const emits = defineEmits(['onEnter'])
// 定义组件的响应式数据
const inputRef = ref<HTMLElement | null>()
// 定义对扫码框的引用
const codeScanRef = ref<HTMLElement | null>()
// 定义对产品码扫码框的引用
const chanPinScanRef = ref<HTMLElement | null>()
// 定义输入框绑定的数据
const model = ref<string>()
// 定义一个数组用于存储查询到的血液信息
const list = ref<InvKuCunOutput[]>([])

const popoverRef = ref<HTMLElement | null>()
/**
 * 扫码处理函数，当在密码输入框按下回车键时触发
 */
const handleEnter = async (code: string) => {
	try {
		list.value = []
		if (!isNull(code)) {
			const bloods = await InvKuCunApi.getByCode(code)
			console.log('血液扫码结果', bloods)
			if (!Array.isArray(bloods) || bloods.length == 0) {
				ElMessage({
					message: `未找到该条码${code}的血液信息!`,
					type: 'error',
				});
				focus()
			} else if (bloods.length == 1) {
				emits('onEnter', bloods[0]);
				clear()
				focus()
			} else if (bloods.length > 1) {
				list.value = bloods;
				popoverRef.value?.click();
				(chanPinScanRef.value as any).clear();
			}
		}
	} catch (e) {
		console.log('血液扫码错误', e)

	}
}
/**
 * 处理弹窗内的扫码事件
 * @param code 扫码获取的条码信息
 */
const handleScan = async (code: string) => {
	try {
		let bloods = list.value.filter(item => (item.xianXueMa + item.chanPinId) == code || item.chanPinId == code)
		if (bloods.length == 1) {
			emits('onEnter', bloods[0]);
			clear()
			focus()
		} else if (bloods.length > 1) {
			list.value = bloods
		} else {
			ElMessage({
				message: `未找到该条码${code}的血液信息!`,
				type: 'error',
			});
		}
	} catch (e) {
		console.log('血液弹窗扫码错误', e)
	}
}
/**
 * 处理表格行的双击选择事件
 * @param row 选中的行数据
 */
const handleSelect = (row: InvKuCunOutput) => {
	emits('onEnter', row);
	clear()
	focus()
}
/**
 * 清空输入框内容
 */
const clear = () => {
	(codeScanRef.value as any).clear();
	(chanPinScanRef.value as any).clear();
}

/**
 * 选中扫码输入框中的内容
 */
const select = () => {
	(codeScanRef.value as any)?.select()
}

/**
 * 让密码输入框获取焦点并清空内容
 */
const focus = () => {
	(inputRef.value as any)?.click();
	(codeScanRef.value as any)?.focus();
	clear()
}

// 暴露 select, focus, clear 方法供父组件调用
defineExpose({ select, focus, clear })
</script>

<style lang='scss' scoped>
.mkScanInput {
	// 相对定位，作为子元素绝对定位的参考
	position: relative;
	height: 39px;
	line-height: 39px;

	.text {
		// 绝对定位，覆盖在密码输入框下方
		position: absolute;
		font-size: 1.6rem;
		width: 100%;
		height: 100%;
		// 禁用中文输入法
		ime-mode: disabled;
		color: red;
		// 使用等宽字体
		font-family: Consolas, Monaco, monospace;
	}

	.pass {
		// 绝对定位，位于最上层
		position: absolute;
		z-index: 2;
		font-size: 1.6rem;
		// 等宽字体
		font-family: 'Consolas', Courier, monospace;
		width: 100%;
		height: 100%;
		border: none;
		// 禁用中文输入法
		ime-mode: disabled;
		// 背景透明
		background-color: transparent;
		// 文字颜色透明
		color: transparent;
		// 光标颜色为红色
		caret-color: red;
		font-family: Consolas, Monaco, monospace;
		// 输入内容自动转换为大写
		text-transform: uppercase;

		:deep(.el-input__wrapper) {
			// 输入框包裹元素背景透明
			background-color: transparent;
			color: transparent;
		}

		:deep(.el-input__inner) {
			// 输入框内部文字颜色透明
			color: transparent;
		}

		::selection {
			// 选中文本时的背景颜色
			background: rgba(46, 141, 255, 0.8);
			color: transparent;
		}

		::-moz-selection {
			// Firefox 选中文本时的背景颜色
			background: rgba(46, 141, 255, 0.8);
			color: transparent;
		}

		::-webkit-selection {
			// Chrome 和 Safari 选中文本时的背景颜色
			background: rgba(46, 141, 255, 0.8);
			color: transparent;
		}
	}

	.iconfont {
		font-size: 1.4rem;
	}

	.mkScanInput-popover {
		position: absolute;
		bottom: 0;
	}
}
</style>